<template>
    <div>
        <div style="width:99%;">
            <Row style="margin-bottom:10px;" :gutter="20">
                <Col span="5">
                <Select v-model="searchParams.postId" placeholder="职务" clearable>
                    <OptionGroup label="通用">
                        <Option v-for="item in postList.generalPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </OptionGroup>
                    <OptionGroup label="专业">
                        <Option v-for="item in postList.proprietaryPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </OptionGroup>
                </Select>
                </Col>
                <Col span="5">
                    <Input v-model="searchParams.name" placeholder="请输入姓名" clearable/>
                </Col>
                <Col span="5">
                    <Input v-model="searchParams.tel" placeholder="请输入联系电话" clearable/>
                </Col>
                <Col span="5">
                    <Input v-model="searchParams.idCard" placeholder="请输入身份证号码" clearable/>
                </Col>
                <Col span="4" style="text-align: right">
                    <Button type="primary" @click="getProPersonList(treeActive)">搜索</Button>
                    <!-- <Button type="warning" style="margin-right: 15px" @click="resetParam">重置</Button> -->
                </Col>
            </Row>
            <Row>
                <Col span="24" style="height:40px;">
                    <span class="yxCheck">
                        当前已选择：
                    </span>
                    <div class="tag-div">
                        <Tag type="border" v-for="(item,index) in selectList" :key="index" closable @on-close="deleteTag(item,index)">{{item.name}}</Tag>
                    </div>
                </Col>
            </Row>
            <Layout class="layout-100" style="background-color:#fff">
                <Sider width="300" class="tree-box" style="height:540px">
                    <Tree :data="tree" @on-select-change="checkTree" class="tree"></Tree>
                </Sider>
                <Content class="table-box">
                    <Table border :columns="columns" :data="personList" ref="tabArr" class="scroll-bar" @on-selection-change="selectChangeRiado" @on-select="onSelect" @on-select-all="onSelectAll"></Table>
                    <Row type="flex" justify="center">
                        <Col>
                            <Page
                                class="pagination"
                                :total="page.total"
                                :current="page.current"
                                :page-size="page.pageSize"
                                :page-size-opts="[10,20,50,100]"
                                @on-change="pageChange"
                                @on-page-size-change="sizeChange"
                                show-elevator
                                show-total
                                show-sizer
                            />
                        </Col>
                    </Row>
                </Content>
            </Layout>
        </div>
        <div class="buttom-footer">
            <button type="button" class="ivu-btn ivu-btn-text" @click="quxiao()">
                取消
            </button>
            <button type="button" class="ivu-btn ivu-btn-primary" @click="closetab()">
                提交
            </button>
        </div>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex'
    import Utils from '../../../common/util'
    export default {
        name: 'CheckPerson',
    data() {
        return {
            personModel:false,
            tree:[],
            searchParams:{},
            personList:[],
            treeActive:[],
            postList:[],//职务
            list:[],
            userDetail: JSON.parse(localStorage.getItem('userList')),
            page: {
                total: 0,
                current: 1,
                pageSize: 10,
                totalPage: 0,
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '序号',
                    align: 'center',
                    width: 70,
                    render: (h, params) => {
                        return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
                    }
                },{
                title: '姓名',
                key: 'name',
                align: 'center',
                }, {
                    title: '联系电话',
                    key: 'tel',
                    align: 'center',
                }, {
                    title: '职务',
                    align: 'center',
                    key: 'postName',
                },
            ],
            page: {
                total: 0,
                current: 1,
                pageSize: 10,
                totalPage: 0,
            },
            selectList:[]
      }
    },
    methods: {
        quxiao(){
            this.personList.forEach((e,index)=>{
                this.$refs.tabArr.$refs.tbody.objData[index]._isChecked = false 
            })
            this.selectList = []
            this.$emit('personBox',true)
        },
        onSelectAll(e){
            let arr = []
            if(this.selectList.length > 0){
                e.forEach(a=>{
                    arr.push(a)
                })
            }else{
                arr = e
            }
            arr.filter((x, index,self) => {
                let arrids = []
                arr.forEach((item,i) => {
                    arrids.push(item.id)
                })
                return arrids.indexOf(x.id) === index
            })
            this.selectList = arr
        },
        onSelect(selection,row){
            this.selectList.push(row)
        },
        //check选
        selectChangeRiado(e) {
            let self = this
            setTimeout(()=>{
                for(let k in self.$refs.tabArr.$refs.tbody.objData){
                    if(self.$refs.tabArr.$refs.tbody.objData[k]._isChecked == false){
                        self.selectList.forEach((e,index)=>{
                            if(self.$refs.tabArr.$refs.tbody.objData[k].id == e.id){
                                self.selectList.splice(index, 1)
                            }
                        })
                    }
                }
            },1000)
        },
        // 人员选择删除
        deleteTag(item,index){
            let self = this
            this.personList.forEach((e,index)=>{
                if(e.id == item.id){
                    self.$refs.tabArr.$refs.tbody.objData[index]._isChecked = false 
                }
            })
            this.selectList.splice(index, 1)
        },
        //获取树
        getTree () {
            this.$api.measurePlan.getTree().then((res) => {
                if(res.code == 200){
                    this.$set(res.data[0],'expand',true)
                    this.tree = res.data;
                    this.getProPersonList(this.tree)
                } else {
                    this.$Message.error(res.data.msg);
                }
            })
        },
        checkTree(data){
            this.page.current = 1;
            this.page.pageSize = 10;
            this.getProPersonList(data);
        },
        getProPersonList(data) {
            if(data.length>0){
                this.treeActive = data;
                let params = {
                    currentPage: this.page.current,
                    pageSize: this.page.pageSize,
                    whereMap: {}
                }
                params.whereMap.searchType = 2;
                params.whereMap = this.searchParams;
                if(data[0].type == 1 || data[0].type == 5){
                    params.whereMap.enterpriseId = data[0].objectId;
                }else if(data[0].type == 2){
                    params.whereMap.projectTeamId = data[0].objectId;
                }else if(data[0].type == 3){
                    params.whereMap.workPointId = data[0].objectId;
                }
                else if(data[0].type == 4 || data[0].type == 6 || data[0].type == 7 || data[0].type == 8){
                    params.whereMap.deptId = data[0].objectId;
                }
                if(data[0].type == 1 ||data[0].type == 4 || data[0].type == 5 || data[0].type == 8){
                    params.whereMap.searchType = 1;
                }else{
                    params.whereMap.searchType = 2;
                }
                params.whereMap.isQueryUser = true;
                let self = this
                if(params.whereMap.searchType){
                    this.$api.ProjectPerson.getProPersonList(params).then(res => {
                        if (res.code === 200) {
                            this.personList = res.data.resultObject
                            if(this.selectList.length > 0){
                                this.selectList.forEach(a=>{
                                    res.data.resultObject.forEach((e,index)=>{
                                        if(a.id == e.id){
                                            setTimeout(()=>{
                                                self.$refs.tabArr.$refs.tbody.objData[index]._isChecked = true 
                                            },500)
                                        }
                                    })
                                })
                            }
                            this.page.total = res.data.totalRecord
                            this.page.totalPage = res.data.totalPages
                        } else {
                            this.$Message.error(res.data.data)
                        }
                    })
                }
            }
        },
        // 分页
        pageChange (current) {
            this.page.current = current;
            this.getProPersonList(this.treeActive)
        },
        // 分页
        sizeChange (size) {
            this.page.pageSize = size;
            this.getProPersonList(this.treeActive)
        },
        //  人员选择提交
        closetab(){
            if(this.selectList.length <= 5){
                this.$emit('personBox',true)
                Utils.$emit('checkPersons',this.selectList)
            }else{
                this.$Message.error('最多选择5个人') 
            }
        },
        resetParam(){
            this.searchParams = {};
            this.personList = [];
            this.getTree();
        },
        //获取职务
        getPostList(id) {
            let data = {
                objectId: id
            }
            this.$api.ProjectPerson.getJobList(data).then(res => {
                if (res.code === 200) {
                    this.postList = res.data
                } else {
                    this.$Message.error(res.message)
                }
            })
        },
    },
    mounted () {
        let self = this
        Utils.$on('personCheck',(msg)=>{
            self.selectList = msg
            setTimeout(()=>{
                if(msg.length == 0){
                    self.personList.forEach((e,index)=>{
                        self.$refs.tabArr.$refs.tbody.objData[index]._isChecked = false 
                    })
                }
            },1000)
        })
        self.personModel = true
        // //1集团 2工程公司 3项目部
        if (self.userDetail.userInOrgType == 'PROJECT_TEAM_USER') {
            self.personType = 3;
            self.getPostList(self.userDetail.projectTeamId)
        }else if(self.userDetail.userInOrgType == 'ROOT_ENTERPRISE_USER'){
            self.personType = 1;
            self.getPostList(self.userDetail.enterpriseId)
        }else if(self.userDetail.userInOrgType == 'NOMAL_ENTERPRISE_USER'){
            self.personType = 2;
            self.getPostList(self.userDetail.enterpriseId)
        }
        self.getTree();
        self.personList = [];
    }
}
</script>
<style scoped>
.yxCheck{
    color: #0099FF;
    font-size: 14px;
    width: 85px;
    float: left;
    display: block;
    margin-right: 10px;
    line-height: 40px;
}
.tag-div{
    margin-top: 6px;
    float: left;
    width: calc(100% - 95px);
    height: 24px;
}
.tree-box{
    background-color: #ffffff;
    border: 1px solid #dcdee2;
}
.table-box{
    background-color: #ffffff;
    margin-left:20px;
}
.tree{
    padding: 15px;
    overflow: auto;
    height: calc(100% - 0px);
}
.tab-page{
    text-align: center;
    margin: 15px 0;
}
.checkPersonType{
    margin-bottom: 40px;
}
.buttom-footer{
    margin-top: 20px;
    padding: 12px 0 0 18px;
    border-top:1px solid #e8eaec;
    text-align: right;
}
</style>
